<template>
    <div style="position: relative" v-loading="loading" class="console-page">
        <el-drawer class="default-cursor drawer_menu forbid-select" @close="close" size="30%" append-to-body
                   ref="drawer" :show-close="false" v-model="showDrawer" direction="ltr" :with-header="false">
            <el-form inline :model="article" class="e-page form-item" spellcheck="false"
                     :validate-on-rule-change="false" :rules="rules" ref="articleForm" @submit.native.prevent>
                <el-form-item label="标题" prop="title" class="article-form title" ref="title">
                    <el-input class="input-auto-resize" v-model="article.title" @focus="focus('title')"/>
                </el-form-item>
                <el-form-item label="描述" prop="description" class="article-form title" ref="description">
                    <el-input class="input-auto-resize" v-model="article.description" @focus="focus('description')"/>
                </el-form-item>
                <el-form-item label="封面" prop="titleImage" class="article-form title">
                    <el-input class="input-auto-resize" v-model="article.titleImage">
                        <i slot="suffix" class="el-input__icon el-icon-search" v-if="article.titleImage"
                           @click="preview" style="cursor: pointer"/>
                    </el-input>
                </el-form-item>
                <el-form-item label="分类" prop="type" class="article-form title">
                    <el-select v-model="article.type" placeholder="请选择分类" style="width: 100%;"
                               class="input-auto-resize" popper-class="normal-poper">
                        <el-option v-for="item in type" :key="item" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签" prop="tag" class="article-form title">
                    <el-select v-model="article.tag" placeholder="请选择标签" style="width: 100%;"
                               class="input-auto-resize" allow-create multiple default-first-option filterable
                               popper-class="normal-poper">
                        <el-option v-for="item in tag" :key="item" :label="item" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否发布" prop="status" class="article-form">
                    <el-radio v-model="article.status" :label="1">发布</el-radio>
                    <el-radio v-model="article.status" :label="0">草稿</el-radio>
                </el-form-item>
                <el-form-item label="类型" prop="sourceType" class="article-form ">
                    <el-radio v-model="article.sourceType" :label="1">原创</el-radio>
                    <el-radio v-model="article.sourceType" :label="0">转载</el-radio>
                </el-form-item>
                <transition name="animate__animated " enter-active-class="animate__zoomIn"
                            leave-active-class="animate__zoomOut">
                    <el-form-item label="原文地址" prop="origUrl" class="article-form title"
                                  v-show="article.sourceType === 0" ref="origUrl">
                        <el-input class="input-auto-resize" v-model="article.origUrl" @focus="focus('origUrl')">
                        </el-input>
                    </el-form-item>
                </transition>
            </el-form>
        </el-drawer>
        <div ref="divRef" style="height:calc(100% - 2px)" @scroll.capture="scroll"/>

        <transition name="animate__animated " enter-active-class="animate__fadeInDown animate__fast"
                    leave-active-class="animate__fadeOutUp animate__faster">
            <div class="up" v-if="scrollOffsetTop > 200" @click="scrollTop">
                <svg class="up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(70,146,221,1)">
                    <path
                        d="M4.99958 12.9999C4.99958 7.91198 7.90222 3.5636 11.9996 1.81799C16.0969 3.5636 18.9996 7.91198 18.9996 12.9999C18.9996 13.8229 18.9236 14.6264 18.779 15.4027L20.7194 17.2353C20.8845 17.3913 20.9238 17.6389 20.815 17.8383L18.3196 22.4133C18.1873 22.6557 17.8836 22.7451 17.6412 22.6128C17.5993 22.59 17.5608 22.5612 17.5271 22.5274L15.2925 20.2928C15.1049 20.1053 14.8506 19.9999 14.5854 19.9999H9.41379C9.14857 19.9999 8.89422 20.1053 8.70668 20.2928L6.47209 22.5274C6.27683 22.7227 5.96025 22.7227 5.76498 22.5274C5.73122 22.4937 5.70246 22.4552 5.67959 22.4133L3.18412 17.8383C3.07537 17.6389 3.11464 17.3913 3.27975 17.2353L5.22014 15.4027C5.07551 14.6264 4.99958 13.8229 4.99958 12.9999ZM6.47542 19.6957L7.29247 18.8786C7.85508 18.316 8.61814 17.9999 9.41379 17.9999H14.5854C15.381 17.9999 16.1441 18.316 16.7067 18.8786L17.5237 19.6957L18.5056 17.8955L17.4058 16.8568C16.9117 16.3901 16.6884 15.7045 16.8128 15.0364C16.9366 14.3722 16.9996 13.6911 16.9996 12.9999C16.9996 9.13037 15.0045 5.69965 11.9996 4.04033C8.99462 5.69965 6.99958 9.13037 6.99958 12.9999C6.99958 13.6911 7.06255 14.3722 7.18631 15.0364C7.31078 15.7045 7.08746 16.3901 6.59338 16.8568L5.49353 17.8955L6.47542 19.6957ZM11.9996 12.9999C10.895 12.9999 9.99958 12.1045 9.99958 10.9999C9.99958 9.89537 10.895 8.99994 11.9996 8.99994C13.1041 8.99994 13.9996 9.89537 13.9996 10.9999C13.9996 12.1045 13.1041 12.9999 11.9996 12.9999Z"/>
                </svg>
            </div>
        </transition>
    </div>
</template>

<script setup>
import {AiEditor} from "aieditor"
import "aieditor/dist/style.css"
import request from "@/utils/request"
import {baseUrl} from "@/utils/constant"
import {useRequest, useElMessage, useEventListener} from "@usehook"
import {ElMessageBox} from 'element-plus'
import router from '@/router'
import {getIcon} from "@/utils/tools"
import storeInstance from "@/pinia"

let article = $ref({
    title: "",
    type: "",
    sourceType: 1,
    status: 0,
    description: "",
    titleImage: "",
    content: "",
    length: 0,
    sequence: 0,
    origUrl: "",
    menu: "",
    tag: ""
})
let type = $ref([])
let tag = $ref([])
let rules = $ref({
    title: [
        {required: true, message: '请输入文章标题', trigger: []},
        {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: []}
    ],
    description: [
        {required: true, message: '请输入文章描述', trigger: []},
        {min: 3, max: 150, message: '长度在 3 到 150 个字符', trigger: []}
    ],
    type: [
        {required: true, message: '请选择文章分类', trigger: []}
    ],
    tag: [
        {required: true, message: '请选择文章标签', trigger: []}
    ]
})
let showImage = $ref(false)
let aiEditor = $ref(null)
let showDrawer = $ref(false)
let scrollOffsetTop = $ref(0)
let editable = $ref(false)
let loading = $ref(false)
let newNote = $ref(!router.currentRoute.value.query.sequence)

const scroll = (e) => {
    if (e.target === document.querySelector("div.tiptap.ProseMirror.aie-content")) {
        scrollOffsetTop = e.target.scrollTop
    }
}

const scrollTop = () => {
    document.querySelector(".aie-content").scroll({top: 0, behavior: 'smooth'})
}

const close = () => {
}

const articleForm = $ref(null)

const {proxy} = getCurrentInstance()

const focus = (ref) => {
    proxy.$refs[ref].clearValidate()
}

const preview = () => {
    if (article.titleImage) showImage = true
}

const commit = (editor) => {
    article.content = editor.getMarkdown()
    article.length = editor.getText().length
    const menu = editor.getOutline()
    article.menu = JSON.stringify(menu)
    submitForm()
}

const save = () => {
    if (article.length) {
        loading = true
        let articleInfo = {...article}
        articleInfo.tag = articleInfo.tag.join(",")
        useRequest({url: "/article/save", method: "post", ...articleInfo}).then(resp => {
            if (resp && resp.status) {
                getTag()
                getType()
                article = resp.data
                article.tag = article.tag ? article.tag.split(",") : []
                useElMessage("文章提交成功")
                const index = router.currentRoute.value.path + "?sequence=" + resp.data.sequence
                storeInstance.tagMenuStore.updateTagMenuTitle(router.currentRoute.value.fullPath, article.title, index)
                if (newNote) router.push(index);
            }
        }).finally(() => {
            loading = false
            newNote = !router.currentRoute.value.query.sequence
        })
    } else {
        useElMessage.error("文章内容不能为空")
    }
}

const submitForm = () => {
    if (newNote && !articleForm) {
        showDrawer = true
    } else if (!newNote && !articleForm) {
        save()
        return
    }
    nextTick(() => {
        articleForm.validate((valid) => {
            if (valid) {
                save()
            } else {
                showDrawer = true
                return false
            }
        })
    })
}

const keyMap = (e) => {
    if ((e.keyCode === 83 || e.code === "KeyS") && (e.ctrlKey || e.altKey || e.metaKey)) {
        if (editable) commit(toRaw(aiEditor))
    }
}

const getType = () => {
    useRequest({url: '/article/type'}).then(e => {
        if (e && e.status) {
            type = e.data
        }
    })
}

const getTag = () => {
    useRequest({url: '/article/tag'}).then(e => {
        if (e && e.status) {
            tag = e.data
        }
    })
}

watch(() => article.sourceType, (val) => {
    if (val === 0) {
        rules['origUrl'] = [
            {required: true, message: '请输入文章描述', trigger: 'blur'},
            {min: 3, max: 150, message: '长度在 3 到 150 个字符', trigger: 'blur'}
        ]
    } else {
        rules['origUrl'] = []
    }
})

const divRef = $ref(null)

onMounted(() => {
    getTag()
    getType()
    aiEditor = new AiEditor({
        element: divRef,
        placeholder: "点击输入内容...",
        content: '',
        ai: {
            commands: []
        },
        image: {
            allowBase64: false,
            uploadUrl: baseUrl + "/file/upload",
            uploadHeaders: {
                "x-token": ""//getEncryptionToken()
            },
            uploader(file, url) {
                return new Promise(((resolve, reject) => {
                    const formData = new FormData();
                    formData.append("file", file)
                    formData.append("bucket", "blog-image")
                    const fs = file.name ? file.name.split(".") : []
                    const filename = "blog-" + new Date().getTime() + "." + (fs.length >= 2 ? fs[fs.length - 1] : "jpg")
                    formData.append("filename", filename)
                    request({
                        url: url,
                        method: 'post',
                        data: formData
                    }).then(_ => {
                        resolve(filename)
                    }).catch(error => {
                        reject(error)
                    })
                }))
            },
            uploaderEvent: {
                onUploadBefore: (_file, _uploadUrl, _headers) => {
                    //监听图片上传之前，此方法可以不用回任何内容，但若返回 false，则终止上传
                },
                onSuccess: (_file, response) => {
                    //监听图片上传成功
                    //注意：
                    // 1、如果此方法返回 false，则图片不会被插入到编辑器
                    // 2、可以在这里返回一个新的 json 给编辑器
                    return {
                        "errorCode": 0,
                        "data": {
                            "src": baseUrl + "/file/get/blog-image/" + response + "?sign=as6d2ewf12k4d23e4&preview&cache",
                            "alt": ""
                        }
                    }
                },
                onFailed: (_file, response) => {
                    //监听图片上传失败，或者返回的 json 信息不正确
                    console.log(response)
                },
                onError: (_file, error) => {
                    //监听图片上传错误，比如网络超时等
                    console.log(error)
                },
            }
        },
        toolbarKeys: ["undo", "redo", "brush", "eraser",
            "|", "heading", "font-family", "font-size",
            "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
            "|", "highlight", "font-color",
            "|", "align", "line-height",
            "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
            "|", "image", {
                html: '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg></div>',
                onClick: (_event, editor) => {
                    ElMessageBox.prompt('请输入图片地址', '提示', {
                        customClass: "image-link forbid-select",
                        confirmButtonText: ' ',
                        cancelButtonText: ' ',
                        icon: markRaw(getIcon("Link")),
                        closeOnClickModal: false,
                        cancelButtonClass: "iconfont icon-close button-auto-resize",
                        confirmButtonClass: 'iconfont icon-check button-auto-resize',
                        roundButton: true,
                        showClose: false
                    }).then(({value}) => {
                        if (value) {
                            editor.focus().insert("<img alt='' src='" + value + "'>")
                        }
                    }).catch(() => {
                    })
                },
                tip: "图片地址"
            }, "video", "attachment", "quote", "container", "code-block", "table",
            "|", "printer", "fullscreen",
            "|", {
                html: '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H18L20.7071 5.70711C20.8946 5.89464 21 6.149 21 6.41421V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM7 4V9H16V4H7ZM6 12V19H18V12H6ZM13 5H15V8H13V5Z"></path></svg></div>',
                onClick: (_event, editor) => {
                    commit(editor)
                },
                tip: "保存内容",
            }, "|", {
                html: '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5624 10.1875C20.8124 9.5 20.8749 8.8125 20.8124 8.125C20.7499 7.4375 20.4999 6.75 20.1874 6.125C19.6249 5.1875 18.8124 4.4375 17.8749 4C16.8749 3.5625 15.8124 3.4375 14.7499 3.6875C14.2499 3.1875 13.6874 2.75 13.0624 2.4375C12.4374 2.125 11.6874 2 10.9999 2C9.9374 2 8.8749 2.3125 7.9999 2.9375C7.1249 3.5625 6.4999 4.4375 6.1874 5.4375C5.4374 5.625 4.8124 5.9375 4.1874 6.3125C3.6249 6.75 3.1874 7.3125 2.8124 7.875C2.24991 8.8125 2.06241 9.875 2.18741 10.9375C2.31241 12 2.7499 13 3.4374 13.8125C3.1874 14.5 3.1249 15.1875 3.1874 15.875C3.2499 16.5625 3.4999 17.25 3.8124 17.875C4.3749 18.8125 5.1874 19.5625 6.1249 20C7.1249 20.4375 8.1874 20.5625 9.2499 20.3125C9.7499 20.8125 10.3124 21.25 10.9374 21.5625C11.5624 21.875 12.3124 22 12.9999 22C14.0624 22 15.1249 21.6875 15.9999 21.0625C16.8749 20.4375 17.4999 19.5625 17.8124 18.5625C18.4999 18.4375 19.1874 18.125 19.7499 17.6875C20.3124 17.25 20.8124 16.75 21.1249 16.125C21.6874 15.1875 21.8749 14.125 21.7499 13.0625C21.6249 12 21.2499 11 20.5624 10.1875ZM13.0624 20.6875C12.0624 20.6875 11.3124 20.375 10.6249 19.8125C10.6249 19.8125 10.6874 19.75 10.7499 19.75L14.7499 17.4375C14.8749 17.375 14.9374 17.3125 14.9999 17.1875C15.0624 17.0625 15.0624 17 15.0624 16.875V11.25L16.7499 12.25V16.875C16.8124 19.0625 15.0624 20.6875 13.0624 20.6875ZM4.9999 17.25C4.5624 16.5 4.3749 15.625 4.5624 14.75C4.5624 14.75 4.6249 14.8125 4.6874 14.8125L8.6874 17.125C8.8124 17.1875 8.8749 17.1875 8.9999 17.1875C9.1249 17.1875 9.2499 17.1875 9.3124 17.125L14.1874 14.3125V16.25L10.1249 18.625C9.2499 19.125 8.2499 19.25 7.3124 19C6.3124 18.75 5.4999 18.125 4.9999 17.25ZM3.9374 8.5625C4.3749 7.8125 5.0624 7.25 5.8749 6.9375V7.0625V11.6875C5.8749 11.8125 5.8749 11.9375 5.9374 12C5.9999 12.125 6.0624 12.1875 6.1874 12.25L11.0624 15.0625L9.3749 16.0625L5.3749 13.75C4.4999 13.25 3.8749 12.4375 3.6249 11.5C3.3749 10.5625 3.4374 9.4375 3.9374 8.5625ZM17.7499 11.75L12.8749 8.9375L14.5624 7.9375L18.5624 10.25C19.1874 10.625 19.6874 11.125 19.9999 11.75C20.3124 12.375 20.4999 13.0625 20.4374 13.8125C20.3749 14.5 20.1249 15.1875 19.6874 15.75C19.2499 16.3125 18.6874 16.75 17.9999 17V12.25C17.9999 12.125 17.9999 12 17.9374 11.9375C17.9374 11.9375 17.8749 11.8125 17.7499 11.75ZM19.4374 9.25C19.4374 9.25 19.3749 9.1875 19.3124 9.1875L15.3124 6.875C15.1874 6.8125 15.1249 6.8125 14.9999 6.8125C14.8749 6.8125 14.7499 6.8125 14.6874 6.875L9.8124 9.6875V7.75L13.8749 5.375C14.4999 5 15.1874 4.875 15.9374 4.875C16.6249 4.875 17.3124 5.125 17.9374 5.5625C18.4999 6 18.9999 6.5625 19.2499 7.1875C19.4999 7.8125 19.5624 8.5625 19.4374 9.25ZM8.9374 12.75L7.2499 11.75V7.0625C7.2499 6.375 7.4374 5.625 7.8124 5.0625C8.1874 4.4375 8.7499 4 9.3749 3.6875C9.9999 3.375 10.7499 3.25 11.4374 3.375C12.1249 3.4375 12.8124 3.75 13.3749 4.1875C13.3749 4.1875 13.3124 4.25 13.2499 4.25L9.2499 6.5625C9.1249 6.625 9.0624 6.6875 8.9999 6.8125C8.9374 6.9375 8.9374 7 8.9374 7.125V12.75ZM9.8124 10.75L11.9999 9.5L14.1874 10.75V13.25L11.9999 14.5L9.8124 13.25V10.75Z"></path></svg></div>',
                onClick: () => {
                    showDrawer = true
                },
                tip: "文章配置菜单",
            }
        ],
        onChange(editor) {
            document.querySelector("aie-footer span").innerText = "Characters: " + editor.getText().length
        },
        onCreated(editor) {
            editor.setEditable(false)
            document.querySelector("aie-footer span").innerText = "Characters: 0"
            document.querySelector("aie-header").classList.add("forbid-select")

            const sequence = router.currentRoute.value.query.sequence || 0
            article.sequence = sequence
            if (sequence) {
                loading = true
                useRequest({url: '/article/detail', sequence}).then(e => {
                    if (e && e.status) {
                        editable = true
                        editor.setEditable(true)
                        article = e.data
                        article.tag = article.tag ? article.tag.split(",") : []
                        editor.setContent(article.content)
                    } else {
                        if (e && e.message) useElMessage.error(e.message)
                        document.querySelector("aie-header").classList.add("forbid-choose")
                    }
                }).finally(() => {
                    loading = false
                })
            } else if (newNote) {
                editable = true
                editor.setEditable(true)
            }
            const aieContent = document.querySelector(".aie-content");
            aieContent.addEventListener("click", (event) => {
                if (event.target.parentElement.className === "aie-codeblock-tools-lang" || event.target.parentElement.parentElement.className === "aie-codeblock-tools-lang" || event.target.className === "aie-codeblock-tools-lang") {
                    let tippy = null
                    if (event.target.parentElement.className === "aie-codeblock-tools-lang") {
                        tippy = event.target.parentElement._tippy
                    } else if (event.target.parentElement.parentElement.className === "aie-codeblock-tools-lang") {
                        tippy = event.target.parentElement.parentElement._tippy
                    } else if (event.target.className === "aie-codeblock-tools-lang") {
                        tippy = event.target._tippy
                    }
                    if (!tippy || tippy.props.content.children.length !== 41) return
                    tippy.props.content.children[17].dataset.item = 'ini'
                    tippy.props.content.children[17].innerText = 'INI'
                    tippy.props.content.children[39].innerText = "HTML"
                    const lang = ['Auto', 'Bash', 'CSS', 'INI', 'Java', 'JavaScript', 'JSON', 'Properties', 'Python', 'Shell', 'SQL', 'TypeScript', 'HTML', 'YAML']
                    for (let ele of tippy.props.content.children) {
                        if (!lang.includes(ele.innerText)) {
                            nextTick(() => {
                                ele.remove()
                            })
                        }
                    }
                }

            }, false)
        }
    })
})

onDeactivated(() => {
    if (document.querySelector(".el-drawer__wrapper")) document.querySelector(".el-drawer__wrapper").style.display = 'none'
    if (document.querySelector(".v-modal")) document.querySelector(".v-modal").style.display = 'none'
    showDrawer = false
})

onActivated(() => {
    showDrawer = false
})

useEventListener('keydown', keyMap)
</script>

<style scoped>
:deep(.fade-transform-enter),
:deep(.fade-transform-leave-to) {
    opacity: 0;
    transform: translateX(30px);
}

:deep(.up-arrow) {
    width: 30px;
    height: 30px;
    padding: 5px;
}

:deep(.up) {
    position: absolute;
    bottom: 21px;
    right: 2px;
    background: #99a9bf;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

:deep(.aie-codeblock-tools-comments),
:deep(.aie-codeblock-tools-explain),
:deep(#ai),
:deep(.ai-command-container hr),
:deep(aie-footer div div svg) {
    display: none !important;
}

:deep(.aie-dropdown-container) {
    height: unset !important;
    max-height: 260px !important;
    width: fit-content !important;
}

:deep(.tippy-box) {
    max-width: 500px !important;
}

:deep(.ai-command-container) {
    width: unset !important;
}

:deep(.ai-command-container-header) {
    gap: 3px;
}

:deep(.article-form) {
    margin: 0;
    width: 100%;
}

:deep(.form-item) {
    margin: 10px 0;
}

:deep(.article-form+.article-form) {
    padding-top: 20px;
}

:deep(.article-form.title .el-form-item__content) {
    max-width: calc(100% - var(--font-size) * 5 - 20px);
}

:deep(.el-form-item__label) {
    width: calc(var(--font-size) * 5 + 10px)
}

/*!*错误提示信息位置*!*/
:deep(.title .el-form-item__error) {
    top: 26%;
    right: 2%;
    left: unset;
    pointer-events: none;
    font-size: calc(var(--font-size) - 4px);
}

:deep(.article-type .el-form-item__error) {
    top: 26%;
    right: -84%;
    left: unset;
    pointer-events: none;
}

:deep(aie-header div:not(:last-child)) {
    border: 0;
}

:deep(.aie-content img) {
    padding: 5px;
}

:deep(.aie-content .el-radio) {
    margin-right: 15px;
}

:deep(p code) {
    color: red;
    background: rgba(255, 255, 255, .2);
}

:deep(code),
:deep(pre),
:deep(span) {
    font-family: inherit !important;
    font-size: var(--font-size) !important;
}

:deep(pre code) {
    background: transparent;
}

:deep(.aie-content> :first-child) {
    margin-top: 0;
    padding-top: 0;
}

:deep(.aie-container .aie-content .selection-marker) {
    padding: 0;
}


:deep(.aie-content h1) {
    padding-top: 0;
}

:deep(.aie-content h2) {
    text-align: left;
    justify-content: flex-start;
    padding-top: 0;
    font-size: calc(var(--font-size) + 5px);
}

:deep(.aie-content h3) {
    font-size: calc(var(--font-size) + 4px);
    padding-top: 0;
    margin: 20px 0;
}

:deep(.aie-content h4) {
    font-size: calc(var(--font-size) + 3px);
    padding-top: 0;
}

:deep(.aie-content h5) {
    font-size: calc(var(--font-size) + 2px);
    padding-top: 0;
}

:deep(.popover) {
    font-weight: var(--font-weight);
}

:deep(.aie-container .aie-codeblock-wrapper) {
    margin: 10px 0;
    padding: 0;
    background: rgba(255, 255, 255, .3);
}

:deep(.aie-codeblock-tools) {
    padding: 5px;
}

:deep(.aie-content pre) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    background: transparent;
    box-shadow: 0px 1px 12px -5px rgba(50, 50, 50, 0.4);
}

:deep(.aie-container .aie-codeblock-langs) {
    width: 120px;
    height: 420px;
    padding: 2px;
}

:deep(.aie-content blockquote) {
    border-radius: 5px;
    border-left: 2px solid #ffa0a0;
}

:deep(.forbid-choose) {
    pointer-events: none;
}

:deep(.selection-marker) {
    font-size: inherit !important;
}
</style>

<style lang="scss">
@import "@usehook/cursor.scss";

.image-link .el-message-box__header {
    border-bottom: 1px solid #ebeef5 !important;
}

.image-link .el-input__inner {
    height: 30px;
}

.image-link .el-message-box__input {
    padding-top: 5px;
    height: 32px;
}

.image-link .el-message-box__header {
    padding: 13px 15px;
}

.image-link.el-message-box {
    padding: 0
}

.image-link .el-message-box__btns {
    padding: 5px 15px;
}

.image-link .el-message-box__message {
    margin: 5px 0;
}

.aie-menu-item {
    div {
        border-radius: 3px;
    }

    span {
        font-family: inherit !important;
        font-size: 14px !important;
    }
}

.drawer_menu .el-drawer__body {
    overflow: hidden;
    padding: 20px;
}

.aie-codeblock-tools-lang,
.aie-codeblock-tools-lang *,
.aie-codeblock-langs-item,
.aie-codeblock-langs-item *,
.aie-menu-item,
.aie-menu-item *,
.aie-dropdown-item,
.aie-dropdown-item * {
    @include cursor-pointer-important
}

.aie-container .aie-dropdown-container .aie-dropdown-item .text {
    padding: 2px 10px;
}
</style>